<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>RFQ XChange - Add a new Company</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="resources/bootstrap/js/bootstrap.js"></script>
        <link href="resources/bootstrap/css/bootstrap.css" rel="stylesheet" />

        <!-- Loading Flat UI -->
        <link href="resources/flat-ui/css/flat-ui.css" rel="stylesheet" />

        <style type="text/css">
			.block {
				display: block !important;
			}
        </style>

    </head>
    <body>

        <div class="container">
            <!-- row -->
            <div class="row">
                Header
            </div>

            <!-- row -->
            <div class="row">
                <div class="span3">
                    Menu
                </div>

                <div class="span9">
                    <h1>Company Info</h1>
                    <div id="companyForm">

                        <form action="addCompany" method="post" >
                            <div class="control-group error ">
                                Company Name
                                <input type="text" id="companyName"
                                name="companyName"
                                class="block" placeholder="Company Name">

                            </div>
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#address-info" data-toggle="tab">Address</a>
                                </li>
                                <li>
                                    <a href="#contact-info" data-toggle="tab">Contact</a>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane active" id="address-info">

                                    <input type="text" id="address"
                                    name="address"
                                    placeholder="Address">
                                    <button type="button"
                                    class="btn btn-mini"
                                    data-toggle="modal"
                                    href="#search-address">
                                        ...
                                    </button>

                                    <input type="text" id="city"
                                    name="city"
                                    class="block"
                                    placeholder="City">

                                    <input type="text" id="zipCode"
                                    name="zipCode"
                                    class="block"
                                    placeholder="Zip Code">

                                    <input type="text" id="country"
                                    name="country"
                                    class="block"
                                    placeholder="Country">
                                </div>

                                <div class="tab-pane" id="contact-info">

                                    <input type="text" id="contact-name"
                                    name="contactName"
                                    class="block"
                                    placeholder="Name">

                                    <input type="text" id="contact-email"
                                    name="contactEmail"
                                    class="block"
                                    placeholder="eMail">

                                    <input type="text" id="contact-phone"
                                    name="contactPhone"
                                    class="block"
                                    placeholder="Phone #">

                                </div>
                            </div>
                            <button type="reset" class="btn" name="cancel">
                                Cancel
                            </button>
                            <button type="submit" class="btn btn-primary" id="ok" name="ok">
                                Ok
                            </button>

                        </form>

                    </div>

                </div>
            </div>

        </div>

        <div id="search-address" class="modal hide fade">
            <div class="modal-header">
                <button type="button"
                class="close"
                data-dismiss="modal"
                aria-hidden="true">
                    &times;
                </button>
                <h3>Search City</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="span4">
                        <label>City</label>
                        <input type="text"
                        name="search-city"
                        id="search-city"
                        value=""/>

                    </div>
                </div>
                <div class="row">
                    <div class="span6 tagsinput">

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn"
                data-dismiss="modal"
                aria-hidden="true">
                    Close
                </button>
                <button class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>

        <script type="text/javascript">
			var address = {
				address : '',
				city : '',
				country : '',
				zipCode : ''
			};

			var contact = {
				name : '',
				email : '',
				phone : ''
			};

			var company = {
				name : '',
				address : address,
				contact : contact
			};

			$(function() {

				$('#ok').click(function() {
					companyBind();
				});

				$('#search-city').keyup(function() {
					console.log($(this).val());

					searchCity($(this).val());

				});

			});

			function companyBind() {

				company.name = $('#companyName').val();

				address.address = $('#address').val();
				address.city = $('#city').val();
				address.country = $('#country').val();
				address.zipCode = $('#zipCode').val();

				company.address = address;

				contact.name = $('#contact-name').val();
				contact.email = $('#contact-email').val();
				contact.phone = $('#contact-phone').val();

				company.contact = contact;

				console.log(company);
			}

			var addresses = [];
			function searchCity(city) {

				$.ajax({
					url : 'http://ws.geonames.org/searchJSON',
					data : {
						featureClass : "P",
						style : "full",
						maxRows : 30,
						name_startsWith : city
					},
					success : function(response) {
						console.log(response);

						buildAddressesTags(buildAddressesFromGeoNames(response));

						console.log(addresses);
					}
				});

			}

			function buildAddressesFromGeoNames(response) {
				addresses = [];
				for (i in response.geonames ) {
					var geoname = response.geonames[i];
					var address = {
						id : geoname.geonameId,
						address : '',
						city : geoname.name,
						country : geoname.countryName
					};

					addresses.push(address);
				}

				return addresses;
			}

			function buildAddressesTags(addresses) {

				var $tagsinput = $('.tagsinput');
				for (i in addresses) {
					$tagsinput.append(buildAddressTag(addresses[i], i));
				}

			}

			function buildAddressTag(address, idx) {
				return '<span class="tag" address-idx="' + idx + '">' + '<span> ' + address.city + '</span><a href="" class=""></a></span>'
			}
        </script>

    </body>
</html>